<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="#/">主页</a>
    <a href="#/my">个人</a>
    <a href="#/task">任务</a>
    <div id="view">
    </div>
    <script>
    
        class Router{
            constructor({routes = []}) {
                this.$routes = routes;
                this.$el = document.getElementById('view')
                this.init()
            }
            init() {
                window.addEventListener('hashchange', () => {
                    let path = window.location.hash.slice(1);
                    let innerHtml = this.$routes.filter(route => route.path === path)[0].components;
                    this.$el.innerHTML = innerHtml;
                })
                window.addEventListener('load', () => {
                    let path = window.location.hash.slice(1);
                    let innerHtml = this.$routes.filter(route => route.path === path)[0].components;
                    this.$el.innerHTML = innerHtml;
                })
            }
        }

        new Router({
            routes: [
                {
                    path: '/',
                    components: '主页'
                },
                {
                    path: '/task',
                    components: '任务'
                },
                {
                    path: '/my',
                    components: '我的'
                }
            ]
        })
    </script>
</body>
</html>